<!DOCTYPE HTML>
<html>
    <head>
        <title>ms-on</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../avalon.js" ></script>
        <script>
            var model = avalon.define({
                $id: "test",
                firstName: "司徒",
                array: ["aaa", "bbb", "ccc"],
                argsClick: function(e, a, b) {
                    alert([].slice.call(arguments).join(" "))
                },
                loopClick: function(a, e) {
                    alert(a + "  " + e.type)
                },
                status: "",
                callback: function(e) {
                    model.status = e.type
                },
                field: "",
                check: function(e) {
                    model.field = this.value + "  " + e.type
                },
                submit: function() {
                    var data = model.$model
                    if (window.JSON) {
                        setTimeout(function() {
                            alert(JSON.stringify(data))
                        })
                    }
                }
            })

        </script>
    </head>
    <body>
        <h3 style="text-align: center">ms-on-*</h3>
        <fieldset ms-controller="test">
            <legend>有关事件回调传参</legend>
            <div ms-mouseenter="callback" ms-mouseleave="callback">{{status}}<br/>
              <input ms-on-input="check"/>{{field}}
            </div>
        <div ms-click="argsClick($event, 100, firstName)">点我</div>
            <div ms-each-el="array" >
                <p ms-click="loopClick(el, $event)">{{el}}</p>
            </div>
            <button ms-click="submit">点我</button>
        </fieldset>
    </body>
</html>